<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>赛博小车控制台</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='cyber.css') }}">
        <script src="{{ url_for('static', filename='control.js') }}"></script>
        <!-- <link rel="stylesheet" href="./cyber.css">
        <script src="./control.js"></script> -->
        
    </head>
<body>
    <div class="container">
        <!-- 左上视频 -->
        <div class="panel video-panel">
            <img src="{{ url_for('video_feed') }}" alt="实时画面">
        </div>

        <!-- 右上数据 -->
        <div class="panel data-panel">
            <div class="data-item">温度 <span id="temp">--</span> °C</div>
            <div class="data-item">速度 <span id="speed">--</span> %</div>
            <div class="data-item">时间 <span id="time">--</span></div>
        </div>

        <!-- 方向键 -->
        <div class="panel ctrl-panel">
            <button class="dir-btn" data-cmd="forward" title="前进">▲</button>
            <div class="mid-row">
                <button class="dir-btn" data-cmd="left" title="左转">◀</button>
                <button class="dir-btn" data-cmd="stop" title="停止">⏸</button>
                <button class="dir-btn" data-cmd="right" title="右转">▶</button>
            </div>
            <button class="dir-btn" data-cmd="backward" title="后退">▼</button>
        </div>

        <!-- 设备开关 -->
        <div class="panel device-panel">
            <button class="device-btn" data-dev="light" data-action="on">灯开</button>
            <button class="device-btn" data-dev="light" data-action="off">灯关</button>
            <button class="device-btn" data-dev="buzzer" data-action="on">蜂鸣开</button>
            <button class="device-btn" data-dev="buzzer" data-action="off">蜂鸣关</button>
        </div>
        
    </div>
</body>
</html>